---
title: 如何使用 use-sound 为 React 应用添加声音效果
description: 通过这篇文章，我们学习了如何安装 `use-sound`，并为应用中的各种交互元素添加音效。不仅提高了用户体验，还能让你的应用更具吸引力。
date: "2024-11-11"
lang: zh
tags:
  - 博客
  - 软件
  - 工具
  - react
category: 技术
cover: https://cdn.qladgk.com/images/20250508164247634.png
---

import { useState } from "react";
import useSound from "use-sound";
import Image from "@/components/mdx/Image";

<Image
  src="https://cdn.qladgk.com/images/20250508164247634.png"
  alt="cover"
  width={999}
  height={527}
  isArticleImage={true}
/>

## 为什么要用 use-sound？

在现代 Web 应用中，用户体验 (UX) 是一个至关重要的部分。

**张洪 @zhHeo** 曾在一篇文章中提到：“如果你期望提升用户浏览时长，可以在交互上拖延时间，但不要在性能上打折扣。”——[查看原文](https://blog.zhheo.com/p/30c885b3.html)。

在界面设计中，我们经常会通过视觉效果来吸引用户的注意力。但是时间久了，当人们面对眼花缭乱的效果难免会出现 **审美疲劳**，那如果这时候来点音效可能是个不错的选择。音效不仅可以为应用增加趣味性，还能提供用户多感官交互的即时反馈。

例如，当你点击此网站的一些按钮、打开某个菜单或完成某个任务时，耳边传来一声清脆的提示音，这种反馈我觉得让用户的操作更有存在感和仪式感，从而让应用变得更加令人愉悦和难忘。

而 [use-sound](https://github.com/joshwcomeau/use-sound) 是一个简单且功能强大的 React Hook，用于在 React 应用中快速添加音效。它基于浏览器的 Audio API，提供了高度抽象的接口，使得开发者可以轻松地为按钮、导航、通知等元素添加声音。

---

## 安装 use-sound

在使用 `use-sound` 之前，首先需要将其安装到你的项目中。打开终端，并在你的 React 项目目录下运行以下命令：

```bash
npm install use-sound
# 或者使用 yarn
yarn add use-sound
```

---

## 快速上手

`use-sound` 的使用非常简单。假设我们有一个按钮，点击时希望播放一个音效。我们可以按照以下步骤来实现：

### 1. 准备音效文件

确保你有一段短促的 `.mp3` 或 `.wav` 文件，比如 `click.mp3`。将它放在你的项目文件夹下，例如 `public/sounds/click.mp3`。

### 2. 使用 use-sound

创建一个简单的按钮组件，当用户点击时播放音效：

```jsx
import useSound from "use-sound";
import clickSound from "/sounds/click.mp3";

function BoopButton() {
  const [play] = useSound(clickSound);

  return <button onClick={play}>点击我</button>;
}

export default BoopButton;
```

### 3. 运行你的 React 应用

现在，当用户点击按钮时，会播放 `click.mp3` 的音效。是不是很简单？

export function BoopButton({ label, sound }) {
  const [play] = useSound(sound, { volume: 1 });

return (

<button
  onClick={play}
  style={{
    padding: "10px 20px",
    backgroundColor: "#4CAF50",
    color: "white",
    border: "none",
    borderRadius: "12px",
    cursor: "pointer",
    margin: "0 15px",
  }}
>
  {label}
</button>
); }

<div
  style={{
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    paddingTop: "30px",
  }}
>
  <BoopButton label="按钮" sound="/assets/sounds/click.mp3" />
  <BoopButton label="按钮" sound="/assets/sounds/lighton.mp3" />
  <BoopButton label="按钮" sound="/assets/sounds/lightoff.mp3" />
  <BoopButton label="按钮" sound="/assets/sounds/open.mp3" />
</div>

---

## 高级用法

`use-sound` 不仅仅可以简单地播放声音，它还提供了丰富的配置选项，让你可以更灵活地控制音效行为。

### 1. 控制音量

如果你想调整音量，可以通过 `volume` 参数进行设置。音量值的范围是 `0` 到 `1`。

```jsx
const [play] = useSound(clickSound, { volume: 0.5 });
```

### 2. 循环播放

如果你希望声音可以循环播放，比如背景音乐，可以使用 `loop` 参数：

```jsx
const [play, { stop }] = useSound("/sounds/background.mp3", { loop: true });

// 开始播放
play();

// 需要时可以手动停止
stop();
```

### 3. 播放不同的声音

你还可以使用多个声音源，例如在打开和关闭菜单时播放不同的声音：

```jsx
import useSound from "use-sound";
import openSound from "/sounds/open.mp3";
import closeSound from "/sounds/close.mp3";

function ToggleMenu() {
  const [playOpen] = useSound(openSound);
  const [playClose] = useSound(closeSound);
  const [isOpen, setIsOpen] = useState(false);

  const toggleMenu = () => {
    if (isOpen) {
      playClose();
    } else {
      playOpen();
    }
    setIsOpen(!isOpen);
  };

  return (
    <button onClick={toggleMenu}>{isOpen ? "关闭菜单" : "打开菜单"}</button>
  );
}
```

---

## 参考资料

- [use-sound 官方文档](https://github.com/joshwcomeau/use-sound)
